<!--
 * @Author: panda
 * @Date: 2022-05-18 09:39
 * @Description: 导航栏组件
-->
<template>
  <!-- affix固钉组件 -->
  <el-affix id="el-affix" :offset="50">
    <div id="ul_container">
      <el-menu
        id="el-menu"
        class="el-menu-demo"
        mode="horizontal"
        :default-active="activeIndex"
        :router="true"
        @select="selectMenu"
      >
        <el-menu-item index="/study">升学</el-menu-item>
        <el-menu-item index="/servant">考公</el-menu-item>
        <el-menu-item index="/certificate">考证</el-menu-item>
        <el-menu-item index="/competition">竞赛</el-menu-item>
        <el-menu-item index="#articles">专栏</el-menu-item>
        <!--        以下感觉难实现，暂时注释-->
        <!--        <el-menu-item index="5"><router-link to="/forum">论坛</router-link></el-menu-item>-->
        <!--        <el-menu-item index="7"><router-link to="/">自习室</router-link></el-menu-item>-->
      </el-menu>
    </div>
  </el-affix>
</template>

<script lang="ts">
import {defineComponent, ref} from 'vue'
import {useRoute, useRouter} from 'vue-router'

export default defineComponent({
  setup() {
    const route = useRoute()
    const router = useRouter()
    const activeIndex = ref(route.path)
    // TODO: menu样式应该回到上一个。
    // 专栏跳转新页面
    const selectMenu = (index: number, indexPath: string) => {
      // 判断是否点击了专栏
      if (indexPath[0] === '#articles') {
        // 跳转专栏
        const routeData = router.resolve({
          // 去掉开头防使用index做router的#符
          path: '/articles'.replace('#', '')
        })
        // TODO，点击专栏后，menu样式返回前一个没实现
        router.back()
        activeIndex.value = "/study"
        window.open(routeData.href, '_blank')
      }
    }
    return {activeIndex, selectMenu}
  }
})
</script>

<style scoped>
#el-affix {
  width: 100%;
  /* padding: 0px !important; */
}

#ul_container {
  margin-top: 10px;
  width: 100%;
  text-align: center;
  border-bottom: 1px solid #e5e7ec;
}

#el-menu {
  display: block;
  width: 100%;
  margin: 0 auto;
  border-bottom: none;
}

a {
  text-decoration: none;
}
</style>
